<template>
  <el-dropdown trigger="click" @command="handleNotice">
    <div class="parent-dev">
      <el-badge :value="totalCount" :max="99" class="item" :hidden="totalCount === 0">
      </el-badge>
      <svg-icon icon-class="bell" class="bell"/>
    </div>
    <el-dropdown-menu slot="dropdown">
      <router-link :to='"/user/profile?active=personNotice"'>

      <el-dropdown-item>
        通知
        <el-badge class="mark" :value="personNoticeCount" :hidden="personNoticeCount === 0"></el-badge>
      </el-dropdown-item>
      </router-link>
      <router-link :to='"/user/profile?active=sysNotice"'>

        <el-dropdown-item>
          公告
          <el-badge class="mark" :value="publicNoticeCount" :hidden="publicNoticeCount === 0"></el-badge>
        </el-dropdown-item>
      </router-link>

    </el-dropdown-menu>
  </el-dropdown>


</template>

<script>
import {userNoticeCount} from '@/api/system/user';

export default {
  name: 'BarNotice',
  created() {
    // userNoticeCount().then(response => {
    //   this.noticeInfo = response.data;
    // });
  },
  computed: {
    personNoticeCount() {
      return this.$store.getters.person_notice_count;
    },
    publicNoticeCount() {
      return this.$store.getters.pub_notice_count;
    },
    totalCount() {
      let total = this.personNoticeCount + this.publicNoticeCount;
      return total;
    },

  },
  methods: {
    handleNotice() {
      // this.$ELEMENT.size = size
      // this.$store.dispatch('app/setSize', size)
      // this.refreshView()
      // this.$message({
      //   message: 'Switch Size Success',
      //   type: 'success'
      // })
    },
  }
}
</script>
<style>
  .item {
    margin-top: 0px;
    margin-bottom: 50px;
    margin-left: 10px;
    position: absolute;
  }
  .parent-dev {
    position: relative;
  }

</style>
